<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>几何图形</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="./controls/OrbitControls.js"></script>
    <!-- <script src="./three.js"></script> -->
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
  </head>

  <body>
    <script>
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      /**
       * 创建网格模型
       */

      /**
       * 平面
       * PlaneGeometry
       */
      var planeGeometry = new THREE.PlaneGeometry(100, 100);
      var planeMaterial = new THREE.MeshLambertMaterial({
        color: '#fff'
      });
      var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
      planeMesh.translateX(-400);
      scene.add(planeMesh);
      /**
       * 圆形
       * CircleGeometry
       */
      var circleGeometry = new THREE.CircleGeometry(100, 100, 0, 2 * Math.PI);
      var circleMaterial = new THREE.MeshLambertMaterial({
        color: '#fff'
      });
      var circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
      circleMesh.translateX(-200);
      scene.add(circleMesh);
      /**
       * 立方体
       * BoxGeometry
       */
      var boxGeometry = new THREE.BoxGeometry(100, 100, 100);
      var boxMaterial = new THREE.MeshLambertMaterial({
        color: '#fff'
      });
      var boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
      boxMesh.translateX(400);
      scene.add(boxMesh);
      /**
       * 球体
       * SphereGeometry
       */
      var sphereGeometry = new THREE.SphereGeometry(60, 40, 40);
      var sphereMaterial = new THREE.MeshLambertMaterial({
        color: '#fff'
      });
      var sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphereMesh.translateX(200);
      scene.add(sphereMesh);
      /**
       * 圆柱
       * CylinderGeometry
       */
      var cylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 25);
      var cylinderMaterial = new THREE.MeshLambertMaterial({
        color: '#fff'
      });
      var cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
      scene.add(cylinderMesh);

      /**
       * 文字
       * TextGeometry
       */
      var loader = new THREE.FontLoader();
      var geometry;
      loader.load(
        // 资源url
        './fonts/optimer_regular.typeface.json',
        function (font) {
          geometry = new THREE.TextGeometry('Hello three.js!', {
            font: font,
            size: 80,
            height: 5,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 10,
            bevelSize: 8,
            bevelSegments: 5
          });
          //创建法向量材质
          var meshMaterial = new THREE.MeshNormalMaterial({
            flatShading: THREE.FlatShading,
            transparent: true,
            opacity: 0.9
          });
          var mesh = new THREE.Mesh(geometry, meshMaterial);
          mesh.position.set(-300, 200, 0);
          scene.add(mesh);
          renderer.render(scene, camera);
        }
      );
      // 坐标辅助线
      var axisHelper = new THREE.AxisHelper(500);
      scene.add(axisHelper);
      /**
       * 光源设置
       */
      //点光源
      var point = new THREE.PointLight('#fff');
      point.position.set(200, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight('#072f64');
      scene.add(ambient);
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 600; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(20, 100, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      function render() {
        renderer.render(scene, camera); //执行渲染操作
      }
      render();
      var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
      controls.addEventListener('change', render); //监听鼠标、键盘事件
    </script>
  </body>
</html>
